<template>
  <div class="profile-page">

    <div class="user-info">
      <div class="container">
        <div class="row">

          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image"  class="user-img" />
            <h4>{{profile.username}}</h4>
            <p>
              Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the Hunger Games
            </p>
            <button class="btn btn-sm btn-outline-secondary action-btn" v-if="user.username !== profile.username">
              <i class="ion-plus-round"></i>
              &nbsp;
              Follow {{profile.username}}
            </button>
          </div>

        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item" v-if="user.username === profile.username">
                <!-- <a class="nav-link active" href="">My Articles</a> -->
                <nuxt-link
                  class="nav-link"
                  :class="{
                    active: user.username === profile.username
                  }"
                  exact
                  :to="{
                    name: 'profile'
                  }"
                >My Articles</nuxt-link>
              </li>
              <li class="nav-item" v-else>
                <nuxt-link
                  class="nav-link"
                  :class="{
                    active: user.username !== profile.username
                  }"
                  exact
                  :to="{
                    name: 'profile'
                  }"
                >Favorited Articles</nuxt-link>
                <!-- <a class="nav-link" href="">Favorited Articles</a> -->
              </li>
            </ul>
          </div>

          <div class="article-preview" v-for="(article, index) in articles" :key="index">
            <div class="article-meta">
              <a href=""><img :src="article.author.image" /></a>
              <div class="info">
                <a href="" class="author">{{article.author.username}}</a>
                <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
              </div>
              <button class="btn btn-outline-primary btn-sm pull-xs-right">
                <i class="ion-heart"></i> {{ article.favoritesCount }}
              </button>
            </div>
            <nuxt-link
              class="preview-link"
              :to="{
                name: 'article',
                params: {
                  slug: article.slug
                }
              }"
            >
              <h1>{{ article.title }}</h1>
              <p>{{ article.description }}</p>
              <span>Read more...</span>
              </nuxt-link>
          </div>


        </div>

      </div>
    </div>

  </div>
</template>

<script>

import { getUserInfo } from '@/api/user'
import { getArticles } from '@/api/article'

import { mapState } from 'vuex'

export default {
  middleware: 'authenticated',
  name: 'UserProfile',
  async asyncData({ params }){

     const [ userInfo, articlesRes ] =  await Promise.all([getUserInfo(params.username),getArticles({author: params.username})])

    // console.log(userInfo)
    // console.log(articlesRes)
      const { profile } = userInfo.data
      const { articles } = articlesRes.data
      return {
          profile,
          articles
      }
    // let { data } = await getUserInfo(params.username)

    // console.log(data.profile)
    //   return {
    //       profile : data.profile
    //   }
  },
  head () {
    return {
      title: `auth ${this.profile.username} - RealWorld`,
      meta: [
        { hid: 'profile', name: `${this.profile.username}`, content: `RealWorld auth ${this.profile.username}`}
      ]
    }
  },
  // data(){
  //   return {
  //     articles:[]
  //   }
  // },
  computed: {
    ...mapState(['user']),
    // totalPage () {
    //   return Math.ceil(this.articlesCount / this.limit)
    // }
  },
  // async created(){
  //   let res = await getArticles({author: this.profile.username})
  //   // console.log(res)
  //   this.articles = res.data.articles
  // }
}
</script>

<style>

</style>
